<template>
  <div class="learnBeautyTab">
    <tabs :value="value" @getIndex="currentIndex">
      <tab label="美丽视频" index="1" class="tab">
        <BeautyVideo />
      </tab>
      <tab label="女神日记" index="2" class="tab">
        <GirlDirty />
      </tab>
    </tabs>
  </div>
</template>
<script>
import BeautyVideo from "../beautyVideo"
import GirlDirty from "../girlDirty"
export default {
  name: "LearnBeautyTab",
  data() {
    return {
      value: 1
    }
  },
  methods: {
    currentIndex(index) {
      this.value = index;
    }
  },
  components: {
    BeautyVideo,
    GirlDirty
  }
}
</script>
<style lang="less" scoped>
  .learnBeautyTab{
    .tab{
      width: 50%;
      text-align: center;
      margin: 20px 0;
    }
    .active{
      color: #ff406f;
    }
  }
</style>




